<template>
  <view class="diary-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">我的日记</text>
      <text class="diary-count">{{ filteredDiary.length }} 篇</text>
    </view>

    <!-- 标签筛选 -->
    <view class="tag-filter">
      <scroll-view scroll-x="true" class="tag-scroll" show-scrollbar="false">
        <text 
          v-for="tag in allTags" 
          :key="tag"
          :class="['tag-item', { active: currentTag === tag }]"
          @click="currentTag = tag"
        >
          <text class="tag-icon">{{ getTagIcon(tag) }}</text>
          <text>{{ tag }}</text>
        </text>
        <text 
          :class="['tag-item', { active: currentTag === '全部' }]"
          @click="currentTag = '全部'"
        >
          <text class="tag-icon">📚</text>
          全部
        </text>
      </scroll-view>
    </view>

    <!-- 日记列表 -->
    <view class="diary-list">
      <view v-if="filteredDiary.length === 0" class="empty-tip">
        <text class="empty-icon">📝</text>
        <text class="empty-text">暂无日记，写点什么吧~</text>
        <navigator url="/pages/writeDiary/writeDiary" class="empty-action">
          <text>立即写日记</text>
        </navigator>
      </view>
      <view 
        v-for="(item, index) in filteredDiary" 
        :key="index"
        class="diary-card-wrapper"
        @click="navigateToWriteDiary(item, index)"
        @longpress="deleteDiaryConfirm(item, index)"
      >
        <diary-card 
          :diary="item"
        />
        <view class="card-hover"></view>
      </view>
    </view>
  </view>
</template>

<script>
import DiaryCard from '@/components/DiaryCard.vue'
import { getStorage, setStorage } from '@/utils/storage'

export default {
  components: { DiaryCard },
  data() {
    return {
      diaryList: [],
      currentTag: '全部',
      allTags: ['开心', '疲惫', '学习', '日常', 'emo'],
      tagIcons: {
        '开心': '😄',
        '疲惫': '😴',
        '学习': '📚',
        '日常': '🌤️',
        'emo': '😔'
      }
    }
  },
  computed: {
    filteredDiary() {
      if (this.currentTag === '全部') {
        return this.diaryList
      }
      return this.diaryList.filter(item => item.tag === this.currentTag)
    }
  },
  onLoad() {
    this.loadDiary()
  },
  onShow() {
    this.loadDiary() // 每次页面显示都重新加载，确保数据最新
  },
  methods: {
    loadDiary() {
      const list = getStorage('DIARY')
      if (list && list.length) {
        // 按日期倒序排列（最新的日记在最前面）
        list.sort((a, b) => new Date(b.date) - new Date(a.date))
      }
      this.diaryList = list || []
    },
    getTagIcon(tag) {
      return this.tagIcons[tag] || '📌'
    },
    navigateToWriteDiary(item, index) {
      // 跳转到编辑页面，传递日记ID
      uni.navigateTo({
        url: `/pages/writeDiary/writeDiary?id=${item.id}`
      })
    },
    deleteDiaryConfirm(item, index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这篇日记吗？',
        success: (res) => {
          if (res.confirm) {
            this.deleteDiary(index)
          }
        }
      })
    },
    deleteDiary(index) {
      // 从过滤后的列表中获取原始索引
      const originalIndex = this.diaryList.findIndex(diary => diary === this.filteredDiary[index])
      if (originalIndex !== -1) {
        this.diaryList.splice(originalIndex, 1)
        setStorage('DIARY', this.diaryList)
        uni.showToast({
          title: '日记已删除',
          icon: 'success',
          duration: 1500
        })
      }
    }
  }
}
</script>

<style scoped>
.diary-page {
  padding: 20rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

/* 页面标题 */
.page-header {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  letter-spacing: 2rpx;
}

.diary-count {
  font-size: 24rpx;
  color: #fff;
  background: linear-gradient(135deg, #2196f3, #1976d2);
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 15rpx rgba(33, 150, 243, 0.3);
}

/* 标签筛选 */
.tag-filter {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25rpx;
  padding: 25rpx;
  margin-bottom: 25rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
  animation: fadeInUp 0.5s ease 0.1s both;
}

.tag-scroll {
  white-space: nowrap;
  padding-bottom: 10rpx;
  scrollbar-width: none;
}

/* 隐藏滚动条 */
.tag-scroll::-webkit-scrollbar {
  display: none;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 10rpx;
  padding: 18rpx 30rpx;
  margin-right: 20rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
  background: rgba(173, 216, 230, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2rpx solid transparent;
}

.tag-item:hover {
  background: rgba(173, 216, 230, 0.2);
}

.tag-item:active {
  transform: scale(0.95);
}

.tag-item.active {
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: white;
  box-shadow: 0 6rpx 20rpx rgba(33, 150, 243, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}

.tag-icon {
  font-size: 30rpx;
  transition: transform 0.3s ease;
}

.tag-item.active .tag-icon {
  transform: scale(1.2);
}

/* 日记列表 */
.diary-list {
  margin-bottom: 20rpx;
}

/* 无日记提示 */
.empty-tip {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25rpx;
  padding: 80rpx 30rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
  animation: fadeIn 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25rpx;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.empty-icon {
  font-size: 100rpx;
  display: block;
  opacity: 0.6;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20rpx);
  }
  60% {
    transform: translateY(-10rpx);
  }
}

.empty-text {
  font-size: 30rpx;
  color: #999;
  font-weight: 500;
}

.empty-action {
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: white;
  padding: 15rpx 40rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  margin-top: 10rpx;
  text-decoration: none;
  box-shadow: 0 4rpx 15rpx rgba(33, 150, 243, 0.3);
  transition: all 0.3s ease;
}

.empty-action:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 10rpx rgba(33, 150, 243, 0.2);
}

/* 日记卡片包装器 */
.diary-card-wrapper {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25rpx;
  margin-bottom: 25rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  animation: fadeInUp 0.5s ease;
}

.diary-card-wrapper:nth-child(2) {
  animation-delay: 0.1s;
}

.diary-card-wrapper:nth-child(3) {
  animation-delay: 0.2s;
}

.diary-card-wrapper:nth-child(4) {
  animation-delay: 0.3s;
}

.diary-card-wrapper:hover {
  transform: translateY(-5rpx);
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
}

.diary-card-wrapper:active {
  transform: translateY(0);
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.card-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(240, 147, 251, 0.1), rgba(245, 87, 108, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.diary-card-wrapper:hover .card-hover {
  opacity: 1;
}


</style>